<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <div class="">
            <!-- <div>
                    <video class="videoBox" :src="videoUrl" controls></video>
                </div> -->
            <el-card style="width: 100%;">
                <el-descriptions class="margin-top" title="详情" :column="3" border>
                    <el-descriptions-item>
                        <template slot="label">
                            ID
                        </template>
                        {{ videoInfo.id }}
                    </el-descriptions-item>
                    <!-- <el-descriptions-item v-if="this.videoInfo.type == 'user'">
                        <template slot="label">
                            举报对象
                        </template>
                        <UserInfo :user_id="videoInfo.object_id" v-if="videoInfo.object_id"></UserInfo>
                    </el-descriptions-item> -->
                    <el-descriptions-item>
                        <template slot="label">
                            类型
                        </template>
                        {{ videoInfo.type == 'user' ? "用户" : videoInfo.type == 'creation' ? "作品" : "帖子" }}
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template slot="label">
                            标签
                        </template>
                        <el-tag type="success" style="margin-right: 10px;" v-for="(item, index) in videoInfo.labels"
                            :key="index"> {{
                                item }} </el-tag>
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template slot="label">
                            回复内容
                        </template>
                        {{ videoInfo.response }}
                    </el-descriptions-item>


                    <el-descriptions-item v-if="videoInfo.model">
                        <template slot="label">
                            作品名称
                        </template>
                        {{ videoInfo.model.creation_name }}
                    </el-descriptions-item>

                    <el-descriptions-item v-if="videoInfo.model">
                        <template slot="label">
                            作品图片
                        </template>

                        <el-image class="border" style="width: 100px; height: 100px" :src="videoInfo.model.first_frame"
                            fit="cover" :preview-src-list="toArray(videoInfo.model.first_frame)">
                        </el-image>
                    </el-descriptions-item>

                    <el-descriptions-item>
                        <template slot="label">
                            创建投诉用户
                        </template>
                        <UserInfo :user_id="videoInfo.user_id" :userInfos="videoInfo.user_info" v-if="videoInfo.user_id"></UserInfo>
                    </el-descriptions-item>

                    <el-descriptions-item v-if="videoInfo.type == 'user'">
                        <template slot="label">
                            被投诉用户
                        </template>
                        <UserInfo :user_id="videoInfo.user.id" :userInfos="videoInfo.user" v-if="videoInfo.user.id"></UserInfo>
                    </el-descriptions-item>

                    <!-- <el-descriptions-item>
                            <template slot="label">
                                用户设备型号
                            </template>
                            {{ videoInfo.model }}
                        </el-descriptions-item> -->

                        
                        <el-descriptions-item>
                        <template slot="label">
                            回复时间
                        </template>
                        {{ videoInfo.updated_at }}
                    </el-descriptions-item>


                    <el-descriptions-item>
                        <template slot="label">
                            投诉时间
                        </template>
                        {{ videoInfo.created_at }}
                    </el-descriptions-item>



                </el-descriptions>


                <!-- 内容 -->
                <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                    内容
                </div>

                <el-card style="margin-bottom: 30px;">
                    {{ videoInfo.content }}
                </el-card>

                <!-- 图片 -->
                <div v-if="videoInfo.medias">
                    <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                        图片
                    </div>

                    <el-card style="margin-bottom: 30px;">
                        <div class="flexFS">
                            <div v-for="(item, index) in videoInfo.medias" :key="index"
                                style="margin-bottom: 30px;margin-right: 30px;">
                                <el-card :body-style="{ padding: '10px' }">
                                    <!-- <el-image style="width: 150px; height: 150px" :src="item" fit="cover"></el-image> -->

                                    <el-image class="border" style="width: 150px; height: 150px" :src="item" fit="cover"
                                        :preview-src-list="videoInfo.medias">
                                    </el-image>

                                </el-card>
                            </div>
                        </div>
                    </el-card>
                </div>


                <!-- 查看举报详情 -->
                <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;" v-if="this.videoInfo.type != 'user'">
                    查看举报作品详情
                    <div style="margin-top: 20px;">
                        <el-button type="success" @click="toDetailsFun()">查看</el-button>
                    </div>
                </div>


            </el-card>


        </div>



    </div>
</template>
      
<script>
import comment from '@/components/comment/index'
export default {
    components: {
        comment
    },
    data() {
        return {
            visible: false,
            loading: false,
            playShow: false,
            videoInfo: {},
            videodetails: [],
            content: ""
        }
    },
    mounted() {
        //this.getworksList()
        if (this.$route.query.id) {
            console.log("this.$route.query.id", this.$route.query.id)
            this.getDetails(this.$route.query.id)
        }


    },
    methods: {
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },


        toDetailsFun() {
            console.log('this.videoInfo.model.creation_type',this.videoInfo)
            if (this.videoInfo.type == 'user') {
                return
            }
            if (!this.videoInfo.creation) {
                this.$message.error('作品已被删除')
                return
            }
            if (this.videoInfo.creation.creation_type == 'short') {
                this.$router.push({ path: "/short-video-details?id=" + this.videoInfo.object_id });
                //短视频
            } else if (this.videoInfo.creation.creation_type == 'infomation') {
                this.$router.push({ path: "/post-list-details?=" +  this.videoInfo.object_id });
                //帖子
            } else {
                this.$router.push({ path: "/long-video-details?id=" + this.videoInfo.object_id });
                //长视频
            }


        },

        getDetails(id) {
            let that = this
            this.$request.get('/complaint/get/' + id).then((res) => {
                console.log('res', res)
                that.videoInfo = res
                //that.videoUrl = res.media_urls[0]
                that.content = res.content
            })
        },
    },
}
</script>

      
<style lang="scss"  scoped>
.videoBox {
    width: 1000px;
    height: 800px;
    background-color: black;

}


.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;

}



.flexSB {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
</style>